<template>
   <div class="person">
        <h1>情况二:监视ref定义的对象类型数据</h1>
        <h2>姓名:{{ person.name }}</h2>
        <h2>年龄:{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改人</button>
   </div>
</template>

<script setup name="Person01" lang="ts">
    import { ref,watch } from 'vue'
    // 数据
    let person = ref({
        name:'张三',
        age:18
    })
    // 方法
    function changeName(){
        person.value.name += "~"
    }
    function changeAge(){
        person.value.age += 1
    }
    function changePerson(){
        person.value = {
            name:'李四',
            age:20
        }
    }
    // 监视 直接写person那么只会监视person整个地址值不会监视里面的值,
    // 如果要监视里面的值那么就需要开启深度监视了
    // deep:true 开启深度监听
    // immediate:true 立即监听
    // 如果修改的是对象里面的某一个值 那么newValue和oldValue都是新值
    watch(person,(newValue,oldValue)=>{
        console.log('person变化了',newValue,oldValue)
    },{deep:true,immediate:true})
</script>

<style>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button{
        margin : 0 10px;
    }
</style>